<style scoped lang="less">
	.el-input {
		width: 205px;
		margin-right: 10px;
		border: none;
	}

	.searchBtn {
		background-color: #106ab1;
		border: none;
	}

	.addBtn {
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}

	/* 表格距顶部的距离 */
	.el-table {
		margin-top: 20px;
	}

	.el-table {
		--el-table-border-color: none;
		--el-table-borde: none;
		--el-table-bg-color: none !important;
		--el-table-header-bg-color: #f3f8fd;
		--el-table-header-text-color: #333 !important
	}

	/* 表格间隙 */
	:deep(.el-table__body) {
		-webkit-border-vertical-spacing: 9px;
	}

	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	// 分页样式
	.el-pagination {
		--el-pagination-bg-color: none;
		--el-pagination-button-disabled-bg-color: none;
		justify-content: center;
	}
</style>
<template>
	<div class="contentOne" v-if="tapFlag=='menu'">
		<div class="header">
			<el-input v-model="inpValue" placeholder="请输入菜单名称" />
			<el-button class="searchBtn" type="info" :icon="Search" @click="search">搜索</el-button>
			<el-button class="addBtn" type="info" :icon="CirclePlus" @click="tapFlag='add'">添加</el-button>
		</div>
		<div class="content">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="menuName" label="名称" width="180" />
				<el-table-column prop="roleName" label="权限" width="180">
					<template #header>
						<el-dropdown trigger="click">
							<span class="el-dropdown-link">
								权限
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="getRoleMenu(0)">全部</el-dropdown-item>
									<el-dropdown-item v-for="item in roles" @click="getRoleMenu(item.roleId)">{{item.roleName}}</el-dropdown-item>
									
								</el-dropdown-menu>
							</template>
		
						</el-dropdown>
		
					</template>
					<template #default="{row}">
						<!-- {{row.roles}} -->
						<span v-for="item in row.roles">{{item.roleName}}/</span>
					</template>
				</el-table-column>
				<el-table-column prop="path" label="访问路径" />
				<el-table-column prop="parentMenu" label="父级菜单" />
				<el-table-column label="操作">
					<template #default="{row}">
						<span style="color: #77b24c;cursor: pointer;"@click="goChange(row)">修改</span>&nbsp;
						<span @click="del(row.menuId)" style="color:red;cursor: pointer;">删除</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				layout="prev,pager,next"
				:page-size="pageSize"
				:page-count="pageCount"
				v-model:current-page="pageIndex"
				@current-change="changePage"
			/>
			<!-- <el-pagination layout="prev, pager, next" :total="pageCount" /> -->
		</div>
	</div>
	<el-dialog
	    v-model="dialogVisible"
	    title="Waring"
	    width="500"
	  >
	    <span style="display: inline-block; width: 100%; text-align: center;">确定要删除吗？</span>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="godel">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	<addMenu v-if="tapFlag=='add'" @che="tap"></addMenu>
	<changeMenu v-if="tapFlag=='change'" @che="tap" :row = "menuId"></changeMenu>
</template>

<script setup lang="ts">
	import { Search, CirclePlus, ArrowDown } from '@element-plus/icons-vue'
	import addMenu  from '@/components/addMenu.vue'
	import changeMenu  from '@/components/changeMenu.vue'
	import { ref } from 'vue';
	import { menuDel, menuList, nameMenu, roleList, roleMenuFn } from '@/api/gh';
	const dialogVisible = ref(false)
	let pageIndex = ref(1)
	let pageSize = ref(5)
	let pageCount = ref(1)
	let inpValue = ref("");//菜单名称
	let tableData = ref([])
	let roles = ref([])
	let tapFlag = ref('menu')
	//菜单列表
	const getMenuList = async () => {
		let res : any = await menuList(
			{
				pageIndex: pageIndex.value + "",
				pageSize: pageSize.value + ""
			}
		)
		tableData.value = res.list.list
		pageCount.value = Number(res.num/pageSize.value)
		// console.log("菜单列表", pageCount.value )
	}
	getMenuList()
	//获取所有权限
	const getRoleList = async()=>{
		let res:any = await roleList(
			{
				pageIndex: pageIndex.value + "",
				pageSize: pageSize.value + ""
			}
		)
		roles.value = res.list
		// console.log("所有权限",roles.value)
	}
	getRoleList()
	
	// 点击分页判断  1全部，2有角色
	let pageFlag=ref(1)
	
	//根据角色查询菜单
	let roleid=ref(0)
	const getRoleMenu=async(params:number)=>{
		// console.log(params)
		if(params==0){
			pageFlag.value=1
			getMenuList()
		}else{
			roleid.value=params
			pageFlag.value=2
			let res:any = await roleMenuFn({
				pageIndex:pageIndex.value+"",
				pageSize:pageSize.value+"",
				roleId:params+""
			})
			// console.log("根据角色获取菜单",res)
			tableData.value = res.list.list
			pageCount.value = Number(Math.ceil(res.num/pageSize.value))
		}
	}
	//搜索
	const search = async()=>{
		let res:any = await nameMenu({
			pageIndex:pageIndex.value+"",
			pageSize:pageSize.value+"",	
			menuName:inpValue.value
		})
		tableData.value = res.list.list
		pageCount.value = Number(Math.ceil(res.num/pageSize.value))
		inpValue.value=""
		// console.log("名称搜索菜单",res)
	}
	const tap=(status)=>{
		tapFlag.value=status
	}
	//删除菜单
	let menuId = ref("")
	
	let del = (row:any) =>{
		menuId.value = row
		dialogVisible.value=true
		
	}
	let godel = async()=>{
		
		let res = await menuDel({
			menuId:menuId.value
		})
		dialogVisible.value=false;
		getMenuList()
	}
	
	//点击分页
	const changePage=(page)=>{
		pageIndex.value=page;
		// console.log(pageIndex.value)
		if(pageFlag.value==1){
			search();
		}else{
			getRoleMenu(roleid.value)
		}
	}
	
	const goChange=(row:any)=>{
		// console.log("goChange",row)
		menuId.value = row
		tapFlag.value = 'change'
	}
</script>